<template>
  <div>
    <nav-top title="会员折扣"
             :goback='true'></nav-top>
    <section class="discountList">
      <ul>
        <li v-for='(val,key) in discountList'
            :key="key"
            class="content"
            @click='selectDiscounty(key)'
            :class="{ 'disable': val.disable}">
          <div>
            <img :src="val.imgUrl"
                 alt="">
            <div class="name">
              <p>{{val.name}}</p><span>{{val.validity}}</span>
            </div>
            <div class="discount">
              <P>
                {{val.discount}}
              </P>
            </div>
          </div>
          <div class="intro">
            <!-- <hr style="visibility:hidden"> -->
            <span> {{val.intro}}</span>
          </div>
          <div class='select'
               v-if='val.select'><img :src="selectImg"></div>
        </li>
      </ul>
      <button class='buy'>点击购买成为会员</button>
    </section>

  </div>
</template>
<script>
import NavTop from "@/components/nav/navBar";

export default {
  components: {
    NavTop,
  },
  data () {
    return {
      active: -1,
      selectImg: '/static/img/member/select.png',
      discountList: [{
        name: '非会员',
        validity: '无限期',
        discount: '无折扣',
        intro: '购买会员后可使用会员折扣 ',
        imgUrl: '/static/img/member/novipMember.png', select: true,
      }, {
        name: '非会员',
        validity: '有限期至会员到期。',
        discount: '10%',
        intro: '购买会员后可使用会员折扣 ',
        imgUrl: '/static/img/member/normalMember.png', select: false
      }, {
        name: '金会员',
        validity: '有限期至会员到期。',
        discount: '13%',
        intro: '购买会员后可使用会员折扣 ',
        imgUrl: '/static/img/member/jinMember.png', disable: true
      },{
        name: '白金会员',
        validity: '有限期至会员到期。',
        discount: '13%',
        intro: '购买会员后可使用会员折扣 ',
        imgUrl: '/static/img/member/baijinMember.png', disable: true
      },],
      selectDiscount: ''
    }
  },
  created () {
  },
  methods: {
    selectDiscounty (key) {      if (this.discountList[key].disable) { return }
      this.discountList.forEach(val => {
        val.select = false;
      });
      this.discountList[key].select = true;
    }
  }
}

</script>
<style lang="scss" scoped>
.discountList {
  width: 293px;
  padding: 62px 13.5px;
  background: #f8f8f8;
  overflow-y: auto;
  .disable {
    opacity: 0.5;
  }
  li {
    width: 100%;
    height: 114px;
    background: #fff;
    margin-top: 13px;
      position: relative;
    img {
      float: left;
      margin: 4px 0 0 15px;
      width: 47px;
      height: 57px;
    }
    .select {
      position:absolute;
      top:0px;
      right: 0px;
      img {
        width: 32px;
        height: 20px;
      }
    }
    .name {
      float: left;
      margin: 14px 0 0 5px;
      p {
        margin: 0;
        font-size: 15px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(0, 0, 0, 1);
      }
      span {
        font-size: 9px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
      }
    }

    .discount {
      float: right;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(0, 164, 75, 1);
      margin: 25px 20px 0 0;
      p {
        margin: 0;
      }
    }
    .intro {
      clear: both;
      border-top: 1px dotted rgba(156, 156, 156, 1);
      margin-top: 40px;
      span {
        font-size: 8px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(156, 156, 156, 1);
        margin: 0px 0 23px 15px;
        line-height: 44px;
      }
    }
  }
  .buy {
    width: 279px;
    height: 44px;
    margin: 30px 7px 0 7px;
    // position: absolute;
    // left: 21px;
    // bottom: 15px;
    font-size: 15px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    background: #06a44f;
    border: none;
  }
}
</style>